<template>
  <div class="card-container relation-rule-index">
    <a-tabs @change="switchTable" :activeKey="activeKey" type="card">
      <a-tab-pane v-for="(item,index) in ruleTypes" :key="index+1" :tab="item.name">
        <relation-table
          v-if="index<2"
          :id="item.key"
          :ruleTypeInt="index+1"
          :ruleType="item.name">
        </relation-table>
        <div v-else :style="{'background-color':'white','height':getDefaultHeight()}"></div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>

import relationTable from './relation_table'

export default {
  components: {
    relationTable
  },

  methods: {
    switchTable(v) {
      this.activeKey = v
    },
    getDefaultHeight() {
      const height = document.body.clientHeight
      return (height - 200) + 'px'
    }
  },
  data() {
    return {
      activeKey: 1,
      ruleTypes: [{
        name: '相等规则'
      }, {
        name: '解析规则'
      }, {
        name: '机器学习规则'
      }]
    }
  }
}

</script>

<style scoped lang="less">

</style>
